<template>
  <view class="jiazhengqiuzhi">
    <view class="position">
      <view class="bgc">
        <!-- 背景盒子 -->
      </view>

      <!-- 家庭求职盒子开始 -->
      <view class="content">
        <view class="form-box  box-padding">
          <view class="title biaoti">
            做家政
          </view>
          <!-- uni表单组件开始 -->
          <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <!-- 姓名列表项开始 -->
            <uni-forms-item label="*姓名:" name="name">
              <input v-model="formData.name" type="text" placeholder="请输入姓名" />
            </uni-forms-item>
            <!-- 姓名列表项结束 -->
            <!-- 手机号列表项开始 -->
            <uni-forms-item label="*手机号码:" name="phone">
              <input v-model="formData.phone" type="text" placeholder="请输入电话号码" />
            </uni-forms-item>
            <!-- 手机号列表项结束 -->

            <!-- 意向岗位开始 -->
            <uni-forms-item label="*意向岗位:" name="b1">
            </uni-forms-item>
            <view class="buttons">
              <text class="button" v-for="(item,i) in ganweiarr" :key="i">
                {{item.text}}
              </text>
            </view>
            <!-- 意向岗位结束 -->

            <!-- 已获证书开始 -->
            <uni-forms-item label="*已获证书:" name="b2">
            </uni-forms-item>
            <view class="buttons">
              <text class="button" v-for="(item,i) in ganweiarr" :key="i">
                {{item.text}}
              </text>
            </view>
            <!-- 已获证书结束 -->


            <!-- 籍贯列表项开始 -->
            <uni-forms-item label="籍贯:" name="native">
              <input class="input" v-model="formData.native" type="text" placeholder="请填写籍贯" />
            </uni-forms-item>
            <!-- 籍贯列表项结束 -->
            <!-- 现居住地列表项开始 -->
            <uni-forms-item label="现居住地:" name="address">
              <input class="input" v-model="formData.address" type="text" placeholder="请填写现居住地" />
            </uni-forms-item>
            <!-- 现居住地列表项结束 -->

            <!-- 意向家政公司列表项开始 -->
            <view class="uni-list">
              <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                  当前选择:
                </view>
                <view class="uni-list-cell-db">
                  <picker @change="bindPickerChange" :value="index" :range="array">
                    <view class="uni-input">{{array[index]}}</view>
                  </picker>
                </view>
              </view>
            </view>
            <!-- 意向家政公司列表项结束 -->


            <!-- 现居住地列表项开始 -->
            <uni-forms-item label="备注信息:" name="postscript">
              <input class="input" v-model="formData.postscript" type="text" placeholder="请填写备注信息" />
            </uni-forms-item>
            <!-- 现居住地列表项结束 -->

            <!-- 提交按钮开始 -->
            <view class="buttonsubmit">
              <button @click="submit">提交资料</button>
            </view>
            <!-- 提交按钮结束 -->


          </uni-forms>
          <!-- uni表单组件结束 -->
        </view>

      </view>
      <!-- 家庭求职盒子结束 -->



    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        index: 0,
        array: ['中国', '美国', '巴西', '日本'],
        ganweiarr: [{
            id: 0,
            text: '月嫂',
            active: false
          },
          {
            id: 1,
            text: '育婴师',
            active: false
          },
          {
            id: 2,
            text: '保洁/清洁',
            active: false
          },
          {
            id: 3,
            text: '保姆',
            active: false
          },
          {
            id: 4,
            text: '产康师',
            active: false
          },
          {
            id: 5,
            text: '早教/托育',
            active: false
          },
          {
            id: 6,
            text: '养老/陪护',
            active: false
          },
          {
            id: 7,
            text: '家装/搬家',
            active: false
          },
        ],
        // 表单数据
        formData: {
          name: 'LiMing',
          phone: '1364744155',
          native: '',
          address: '',
          postscript: ''
        },
        rules: {
          // 对name字段进行必填验证
          name: {
            rules: [{
                required: true,
                errorMessage: '请输入姓名',
              },
              {
                minLength: 3,
                maxLength: 5,
                errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
          // 对email字段进行必填验证
          phone: {
            rules: [{
                required: true,
                errorMessage: '请输入手机号',
              },
              // {
              //   validateFunction:function(rule,value,data,callback){
              //     let phoneReg=(/^1[3|5|7|8]\d{9}$/)
              //     if(!phoneReg.test(value)){
              //       callback('身份证格式不正确，请重新填写')
              //     }
              //     return true

              //   }
              // }
              {
                validateFunction: function(rule, value, data, callback) {
                  let iphoneReg = /^1[3|5|7|8]\d{9}$/;
                  if (!iphoneReg.test(value)) {
                    callback('手机号码格式不正确，请重新填写')
                    return false
                  } else {
                    return true
                  }

                }
              },
            ]
          }
        }


      };
    },
    methods: {

      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
      },
      
      onReady() {
      		// 需要在onReady中设置规则
      		this.$refs.form.setRules(this.rules)
      	},

      submit() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', res);
        }).catch(err => {
          console.log('表单错误信息：', err);
        })
      },
      /**
       * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
       * @param {String} name 字段名称
       * @param {String} value 表单域的值
       */
      // binddata(name,value){
      // 通过 input 事件设置表单指定 name 的值
      //   this.$refs.form.setValue(name, value)
      // },
      // 触发提交表单
      submit() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', res);
        }).catch(err => {
          console.log('表单错误信息：', err);
        })
      }
    }
  }
</script>

<style lang="scss">
  .jiazhengqiuzhi {
    background-color: #f5f5f5;

    .position {
      position: relative;

      .bgc {
        height: 100rpx;
        background-color: #3f51b5;

      }

      // 家庭求职盒子
      .content {
        position: absolute;
        top: 40rpx;
        left: 24rpx;
        background-color: #fff;
        width: 704rpx;

        // height: 1212rpx;
        .biaoti {
          height: 110rpx;
          line-height: 110rpx;
          border-bottom: #f5f5f5 2rpx solid;





        }

        .uni-forms {

          margin-bottom: 144rpx;

          .uni-forms-item {
            height: 96rpx;
            border-bottom: 2rpx solid #f5f5f5;
            margin-bottom: 0;
            align-items: baseline;

            .uni-forms-item__label {
              width: 200rpx !important;


            }




          }

          .buttons {
            height: 160rpx;
            display: flex;
            flex-wrap: wrap;

            /*换行*/
            // padding: 32rpx 20rpx 52rpx 20rpx ;
            .button {
              height: 46rpx;
              font-size: 28rpx;
              border: solid 2rpx #3f51b5;
              border-radius: 1em;
              padding: 0 15rpx;
              color: #3f51b5;
              margin-right: 20rpx;

            }

          }

          .uni-list-cell {
            display: flex;
            justify-content: space-between;
            height: 96rpx;
            line-height: 96rpx;
            // background-color: blueviolet;
            font-size: 32rpx;
            // color: #f5f5f5;
            border-bottom: 2rpx solid #f5f5f5;
          }



        }
      }

      .buttonsubmit {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
z-index: 99999;
        // overflow: hidden;
        button {
          background-color: #3f51b5;
          border-radius: 0;
          color: #fff;
        }

      }
    }



  }
</style>
